﻿<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:410px"></div>
<!-- 引入 echarts.js -->
<script src="./js/allecharts.js"></script>
<script type="text/javascript">

		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		
        // 使用	
		function createKCharts(code,legenddata,xdata,ydata,average) {
				var option = {
					tooltip : {
						trigger: 'axis',
						formatter: function (ydata) {
							var res = ydata[0].name;
							for (var i = ydata.length - 1; i >= 0; i--) {
								if (ydata[i].value instanceof Array) {
									res += ' : ' + ydata[i].seriesName;
									res += '<br/>  开盘 : ' + ydata[i].value[0] + '  最高 : ' + ydata[i].value[3];
									res += '<br/>  收盘 : ' + ydata[i].value[1] + '  最低 : ' + ydata[i].value[2];
								}else {
									res += '<br/>' + ydata[i].seriesName;
									res += ' : ' + ydata[i].value;
								}
							}
							return res;
						}
					},
					legend: {//说明
						data:legenddata  //['sh600019','均价']
					},
					toolbox: {
						show : true,
						feature : {
							dataZoom : {show: true},
							magicType: {show: true, type: 'bar'},
							restore : {show: true}
						}
					},
					dataZoom : {
						show : true,
						realtime: true,
						start : 10,
						end : 100
					},
					xAxis : [
						{
							type : 'category',
							boundaryGap : true,
							scale: true,
							axisTick: {onGap:false},
							splitLine: {show:false},
							data : xdata   //[“2013-01-04”]
						}
					],
					yAxis : [
						{
							type : 'value',
							scale:true,
							splitNumber: 5,
							boundaryGap: [0.01, 0.01],
							axisLabel: {
								formatter: '{value} 元'
							}
						},
						{
							type : 'value',
							scale:true,
							splitNumber: 5,
							boundaryGap: [0.05, 0.05],
							axisLabel: {
								formatter: function (v) {
									return v.toFixed(2)
								}
							}
						}
					],
					series : [
						{
							name:'均价',
							type:'line',
							yAxisIndex: 1,
							symbol: 'none',
							data:average,
							markPoint : {
								symbol: 'emptyPin',
								itemStyle : {
									normal : {
										color:'#1e90ff',
										label : {
											show:true,
											position:'top',
											formatter: function (param) {
												return param.value.toFixed(2)
											}
										}
									}
								},
								data : [
									{type : 'max', name: '最大值', symbolSize:5},
									{type : 'min', name: '最小值', symbolSize:5}
								]
							},
							markLine : {
								symbol : 'none',
								itemStyle : {
									normal : {
										color:'#1e90ff',
										label : {
											show:true,
											formatter: function (param) {
												return param.value.toFixed(2)
											}
										}
									}
								},
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						{
							name: code ,
							type:'candlestick',
							symbol: 'none',
							data:ydata
						}
					]
			};

	   // 为echarts对象加载数据 
		myChart.setOption(option); 
		}
	 

</script>
</body>